/**
 * Sequential Content Renderer
 *
 * Renders content blocks in chronological order:
 * reflection content -> tool call -> reflection content -> tool call -> etc.
 */

import type { ChatSettings } from "@shared/types/chat-settings";
import type { ContentBlock } from "@shared/types/sequential-content";
import { ReflectionBlock } from "./reflection-block";
import { ToolCallBlock } from "./tool-call-block";

interface SequentialContentRendererProps {
  messageId: string;
  threadId: string;
  contentBlocks: ContentBlock[];
  settings: ChatSettings;
  className?: string;
}

export function SequentialContentRenderer({
  messageId,
  threadId,
  contentBlocks,
  settings,
  className = "",
}: SequentialContentRendererProps) {
  if (!contentBlocks || contentBlocks.length === 0) {
    return null;
  }

  // Sort blocks by order to ensure proper chronological display
  const sortedBlocks = [...contentBlocks].sort((a, b) => a.order - b.order);

  return (
    <div className={`space-y-4 ${className}`}>
      {sortedBlocks.map((block) => {
        if (block.type === "reflection") {
          return (
            <ReflectionBlock
              key={block.id}
              block={block}
              messageId={messageId}
              settings={settings}
            />
          );
        } else if (block.type === "tool_call") {
          return (
            <ToolCallBlock
              key={block.id}
              block={block}
              messageId={messageId}
              threadId={threadId}
            />
          );
        }
        return null;
      })}
    </div>
  );
}
